<template>
  <div class="qy_xt">
    <div class="t_hand">全院血压管理中心</div>
    <el-row>
      <el-col :span="7" style="padding: 15px">
        <div style="width: 100%; height: calc(100vh - 150px)">
          <div style="padding: 15px">
            <p class="title mt20">当日情况</p>
            <div class="w50">
              <i class="iconfont icon dsib" style="font-size: 50px">&#xe70f;</i>
              <span class="dsib tar cf w100"
                >今日入院<br /><span class="fz18"> {{info.今日入院人数}}人 </span></span
              >
            </div>
            <div class="w50">
              <i class="iconfont icon dsib" style="font-size: 50px">&#xe689;</i>
              <span class="dsib tar cf w100"
                >今日在院<br /><span class="fz18"> {{info.今日在院人数}}人 </span></span
              >
            </div>
            <div class="w50 mt20">
              <i class="iconfont icon dsib">&#xe731;</i>
              <span class="dsib tar cf w100"
                >高血压患者数<br /><span class="fz18"> {{info.高血压患者数}}人 </span></span
              >
            </div>
            <div class="w50 mt20">
              <i class="iconfont icon dsib">&#xe613;</i>
              <span class="dsib tar cf w100"
                >异常人数<br /><span class="fz18"> {{info.异常人数}}人 </span></span
              >
            </div>
            <p class="title mt50">全院血压达标率</p>
            <div style="width: 100%; height: 300px; margin-top: 25px">
              <qiun-vue-ucharts
                type="pie"
                :opts="opts1"
                :chartData="chartData1"
              />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="17" style="padding: 15px; padding-left: 0px">
        <el-row>
          <el-col :span="15">
            <p class="title">全院检测情况</p>
            <div class="df">
              <span class="item_span tac cf bgc1">
                {{info.总人数}}人 <br />
                <span class="fw700">检测人数</span>
              </span>
              <span class="item_span tac cf bgc2">
                {{info.高血压人数}}人 <br />
                <span class="fw700">高血压人数</span>
              </span>
              <span class="item_span tac cf bgc3">
                {{info.低血压人数}}人 <br />
                <span class="fw700">低血压人数</span>
              </span>
              <span class="item_span tac cf bgc4">
                {{info.正常人数}}人 <br />
                <span class="fw700">正常人数</span>
              </span>
            </div>
            <p class="title mt20">异常情况</p>
            <el-table
              :data="info.异常情况"
              border
              style="width: 100%; background: rgb(95, 115, 185); color: #fff"
              height="280"
              :header-cell-style="{
                background: 'rgb(95,115,185)',
                color: '#fff',
              }"
              :row-style="{ background: 'rgb(95,115,185)', color: '#fff' }"
            >
              <el-table-column prop="name" align="center" label="姓名">
              </el-table-column>
              <el-table-column prop="sex" align="center" label="性别">
                <template slot-scope="scope">
                  {{scope.row.sex == 1 ?'男':scope.row.sex == 2 ?'女':'未知'}}
                </template>
              </el-table-column>
              <el-table-column prop="age" align="center" label="年龄">
              </el-table-column>
              <el-table-column align="center" label="血压">
                <template slot-scope="scope">
                  {{scope.row.bph}} / {{scope.row.bpl}} 
                </template>
              </el-table-column>
              <el-table-column prop="create_time" align="center" label="检测时间">
              </el-table-column>
              <el-table-column prop="sectionName" align="center" label="科室名称">
              </el-table-column>
              <el-table-column prop="bed" align="center" label="床号">
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="9" style="padding-left: 10px">
            <div style="width: 100%">
              <div style="padding: 10px">
                <p class="title">各机构检测情况</p>
                <el-table
                  :data="info.list"
                  border
                  style="
                    width: 100%;
                    background: rgb(95, 115, 185);
                    color: #fff;
                  "
                  height="375"
                  :header-cell-style="{
                    background: 'rgb(95,115,185)',
                    color: '#fff',
                  }"
                  :row-style="{ background: 'rgb(95,115,185)', color: '#fff' }"
                >
                  <el-table-column prop="科室名称" align="center" label="科室名称">
                  </el-table-column>
                  <el-table-column
                    prop="监测数"
                    align="center"
                    width="70"
                    label="检测数"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="高血压数"
                    align="center"
                    width="70"
                    label="高血压"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="低血压数"
                    align="center"
                    width="70"
                    label="低血压"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="正常数"
                    align="center"
                    width="70"
                    label="正常数"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <p class="title mt10">科室血压达标率</p>
        <div class="ke_box">
          <qiun-vue-ucharts type="mix" :opts="opts2" :chartData="chartData2" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import qiunVueUcharts from "@qiun/vue-ucharts";
export default {
  components: {
    qiunVueUcharts,
  },
  data() {
    return {
      chartData1: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts1: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        fontColor: "#fff",
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 25,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF",
            linearType: "custom",
          },
        },
      },
      chartData2: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts2: {
        color: [
          "#91CB74",
          "#1890FF",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        legend: {},
        textColor: "#fff",
        fontColor: "#fff",
        xAxis: {
          disableGrid: true,
          title: "",
          fontColor: "#fff",
          axisLineColor: "#fff",
          titleFontColor: "#fff",
          titleOffsetX: -30,
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "right",
              title: "控制达标率",
              textAlign: "left",
              min: 0,
              max: 100,
            },
            {
              position: "left",
              title: "检测人数",
              textAlign: "right",
            },
          ],
        },
        extra: {
          mix: {
            column: {
              width: 20,
            },
          },
        },
      },
      tableData_ycqk: [],
      info: {},
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$get(baseUrl.mbIp + "/api/Data/XueYaBigScreen?orgId=3022").then(
        (res) => {
          this.info = res.Data;
          this.setInfo();
        }
      );
    },
    setInfo() {
      this.getServerData1();
      this.getServerData2();
    },
    getServerData1() {
      let res = {
        series: [
          {
            data: [
              { name: "达标人数", value: this.info.正常人数 },
              { name: "高血压人数", value: this.info.高血压患者数 },
              { name: "低血压人数", value: this.info.低血压人数 },
            ],
          },
        ],
      };
      this.chartData1 = JSON.parse(JSON.stringify(res));
    },
    getServerData2() {
      var list_t = [];
      var list_v1 = [];
      var list_v2 = [];
      for (var i in this.info.list) {
        list_t.push(this.info.list[i].科室名称);
        list_v1.push(this.info.list[i].监测数);
        list_v2.push(this.info.list[i].达标率);
      }
      let res = {
        categories: list_t,
        series: [
          {
            name: "检测人数",
            index: 1,
            type: "column",
            data: list_v1,
          },
          {
            name: "控制达标率",
            type: "line",
            color: "#FAC858",
            data: list_v2,
          },
        ],
      };
      this.chartData2 = JSON.parse(JSON.stringify(res));
    },
  },
};
</script>
  
  <style scoped lang='scss'>
.qy_xt {
  height: calc(100vh - 46px);
  background-color: rgb(5, 13, 75);
  .t_hand {
    height: 70px;
    background-image: url("../../assets/b_hand.png");
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中 */
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    padding-top: 20px;
  }
  .title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }
  .item_span {
    display: inline-block;
    width: 120px;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    font-size: 16px;
  }
  .ke_box {
    border: 1px solid #fff;
    padding: 15px;
    height: 208px;
  }
  .w50 {
    width: 50%;
    display: inline-block;
    text-align: center;
  }
  .icon {
    color: rgb(96, 150, 230);
    font-size: 40px;
  }
  .dsib {
    display: inline-block;
  }
  .tar {
    text-align: right;
  }
  .cf {
    color: #fff;
  }
  .fz18 {
    font-size: 18px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt50 {
    margin-top: 50px;
  }
  .w100 {
    width: 100px;
  }
  .df {
    display: flex;
    justify-content: space-between;
  }
  .bgc1 {
    background-color: rgb(30, 120, 215);
  }
  .bgc2 {
    background-color: rgb(95, 100, 200);
  }
  .bgc3 {
    background-color: rgb(215, 75, 70);
  }
  .bgc4 {
    background-color: rgb(80, 200, 150);
  }
  .fw700 {
    font-weight: 700;
  }
}
::v-deep .el-table__empty-text {
  color: #fff;
}
</style>
  